<template>
  <div :id="oid" style="border:1px solid #eee;position:relative;" dropEffect='move'
       @dragstart='dragstart($event)' @drag='dragging($event)' @dragend="dragend($event)"
       draggable="true">
    <div style="display:flex;items-align:center;justify-content:center;">
      <Icon type="easel" size="40"></Icon>
    </div>
    <div style="font-size:10px;text-align: center;"> {{title}}</div>
  </div>
</template>

<script>
  export default {
    name: 'dragger',
    data () {
      return {}
    },
    props: {
      title: {
        type: String,
        required: true
      },
      oid: {
        type: String,
        required: true
      }
    },
    methods: {
      dragstart (event) {
        event.dataTransfer.setData('tid', event.target.id)
      },
      dragging (event) {
        event.preventDefault()
      },
      dragend (event) {
        event.preventDefault()
        // 恢复透明度
        event.target.style.opacity = ''
      }
    }
  }
</script>

<style scoped>

</style>
